<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="css/galleriffic.css"/>
    <style type="text/css">
    body div#menu a {
        color: white;
        text-decoration: none;
    }
    body div#menu a:hover {
        color: red;
        text-shadow: aqua;
        font-style: italic;
    }
    div.navigation{
        width:350px;
        float: left;
    }
    div.content{
        display:block;
        width:850px;
    }
    div.content a, div.navigation a {
        color: white;
    }
    #folderName {
        font-size: 150%;
        font-weight: bold;
    }
    </style>
    <jsp:include page="common.jsp"/>
    
    <script type="text/javascript">
    var Gallery = jQuery.Class.create({
        init : function(folderId) {
            this.folderId = folderId;
    	    this.total;
    	    this.after;
    	    this.limit = 12;
    	    this.page = 0;
    	    this.photos = new Array();

    	    this.getPhotos();
        },
        getPhotos : function() {
            var gallery = this;
        	$.ajax({
                url : '/photo?findByFolder=&limit=' + limit + '&folder=' + folderId + (after != null ? '&after=' + after : ''),
                dataType : 'json',
                timeout : 5000,
                success : function(json) {
                    if (json.success) {
                        gallery.after = json.after;
                        if (gallery.total == null) {
                            gallery.total = json.total;
                        }
                        if (json.photos) {
                            gallery.addPhotos(json.photos);
                        }
                    } else {
                        alert(json.error);
                    }
                },
                error : function(request, status, error) {
                    alert('error : ' + request.responseText);
                }   
            });
        },
        addPhotos : function(photos) {
        	$('#photoList').empty();
            $('<ul class="thumbs noscript"></ul>').appendTo($('#photoList'));
            
            var gallery = this;
            $.each(photos, function(){
                gallery.photos.push(this);

                $('<li><a class="thumb" href="' + getShowSlideshowUrl(this.id) + '" title="' + this.name + '"><img src="' + getShowThumbnailUrl(this.id) + '" alt="' + this.name + '"/></a></li>')
                .appendTo($('#photoList ul'));
            });
        }
    });
    
    /* function showPhotos(folderId) {
        $.ajax({
        	url : '/photo?findByFolder=&limit=12&folder=' + folderId,
            dataType : 'json',
            timeout : 5000,
            success : function(json) {
                if (json.success) {
                    if (json.photos) {
                    	initPhotos(json.photos, json.total, json.after);
                    }
                } else {
                    alert(json.error);
                }
            },
            error : function(request, status, error) {
                alert('error : ' + request.responseText);
            }   
        });
    }

    function initPhotos(photos, total, after) {
    	$('#photoList').empty();
        $('<ul class="thumbs noscript"></ul>').appendTo($('#photoList'));
        addPhotos(photos);
        
    }

    function addPhotos(photos) {
        $.each(photos, function() {
        	$('<li><a class="thumb" href="' + getShowSlideshowUrl(this.id) + '" title="' + this.name + '"><img src="' + getShowThumbnailUrl(this.id) + '" alt="' + this.name + '"/></a></li>')
            .appendTo($('#photoList ul'));
        });
    }*/
    
    $(document).ready(function() {
        new Gallery('${actionBean.folder.id}');
    });
    </script>
</head>
<body>
    <div style="margin: 0px;" id="menu"><a href="/">&lt;&lt; Retour à l'accueil</a><div id="folderName">Folder ${actionBean.folder.name}</div></div>
    <div style="width: 1200px;">
        <div id="gallery-adv" class="content">
           <div id="controls-adv" class="controls"></div>
           <div id="loading-adv" class="loader"></div>
           <div id="slideshow-adv" class="slideshow"></div>
       </div>
       <div id="photoList" class="navigation"></div>
       <div class="clear"></div>
    </div>
</body>
</html>